Class SoundTape extends Box
var playing=false;
var audio;
var url;
var frame=0;
var ring2;
var ring3;
var label;
var frameTime=0;
function SoundTape(url,duration=60,flip=false){
	this.url=url;
	var w=150+250*(Math.min(duration,60)/60);
	this.setSize(w,72);
	this.setBg(["#2eb0ff","#0290da",!flip?[,36,36,36]:[36,,36,36]]);
	this.addChild([
		[{pos:[34,34,4,4],bg:["#fff",,2]}],
		[{dim:"ring2",pos:[36,36,18,18],mask:true,rotation:-45},[{pos:[-9,-9,18,18],bg:[,"2#fff",9]}]],
		[{dim:"ring3",pos:[36,36,32,32],mask:true,rotation:-45},[{pos:[-16,-16,32,32],bg:[,"2#fff",16]}]],
		[[duration+"\"","#fff"],{dim:"label",pos:[65,"c"]}],
	]);
}
function setFrame(f){
	if(f>=3) f=0;
	this.frame=f;
	this.ring2.setVisible(this.frame==0||this.frame==2);
	this.ring3.setVisible(this.frame==0);
}
function onClick(){
	if(!this.audio){
		this.audio=document.createElement("audio");
	}
	this.playing=!this.playing;
	if(this.playing){
		this.audio.src=this.url;
		this.audio.play();
	}
	else{
		this.audio.pause();
	}
}
function onFrame(){
	if(this.playing&&this.audio.paused){
		this.playing=false;
	}
	if(G.now-this.frameTime>300&&(this.playing||this.frame!=0)){
		this.frameTime=G.now;
		this.setFrame(++this.frame);
	}
}